<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
  <script src="https://unpkg.com/@magic-microservices/magic@latest/dist/index.umd.js"></script>
  <!-- <script type="module" src="./dist/material.js"></script> -->
</head>

<body>
  <div id="app">
    <e-button type="primary"> e button </e-button>
  </div>
  <!-- <script type="module" src="/src/main.ts"></script> -->
  <script type="importmap">
      {
        "imports": {
          "vue": "https://esm.sh/vue"
        }
      }
    </script>
  <script type="module">
    import { createApp, h } from 'vue'

    import { EButton } from './dist/material.js'

    let vueInstance = null
    magic('e-button', {
      bootstrap() {
        console.log('bootstrap')
      },
      mount(container, props, ...as) {
        console.log('magic-microservices-component-vue mount >>> ', props, container, as)
        vueInstance = createApp((_props, { slots }) => h(EButton, props, slots)).mount()
      },
      updated(attrName, value) {
        console.log('magic-microservices-component-vue update', attrName, ' >>> ', value)
        vueInstance[attrName] = value
        vueInstance.$forceUpdate()
      },
    }, {
      propTypes: {
        type: String,
      },
    })
  </script>
</body>

</html>